<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/webcon/resources/"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/realTime.css">

    <script src="js/jquery-3.5.0.min.js"></script>
    <script src="layui/layui.js"></script>

    <!-- 引入bootstrap -->
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>

    <!--引入webuploader-->
    <link rel="stylesheet" type="text/css" href="widget/webuploader/webuploader.css">
    <script type="text/javascript" src="widget/webuploader/webuploader.min.js"></script>

    <!-- 引入ztree -->
    <link rel="stylesheet" href="widget/zTree/zTreeStyle/zTreeStyle.css"/>
    <script type="text/javascript" src="widget/zTree/jquery.ztree.all.min.js"></script>

    <!-- 自定义js -->
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myupload.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myztree.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mytask.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/task_real.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mytask_status.js'}"></script>

    <style>
        #picker div:nth-child(2){width:100%!important;height:100%!important;}
    </style>

    <script th:inline="javascript">
        $(function () {
            //初始化实时音乐任务列表
            initRealTask();
        });
    </script>

</head>
<body>
<div class="header">
    <div class="list-item" onclick="openModal(0)">
        <div class="list-item-top">
            <img src="./img/xinjian.png" />
        </div>
        <div class="desc">新建任务</div>
    </div>
    <div class="list-item" onclick="openModal(1)">
        <div class="list-item-top">
            <img src="./img/bianji.png" />
        </div>
        <div class="desc">编辑任务</div>
    </div>
    <div class="list-item" onclick="deleteTask()">
        <div class="list-item-top">
            <img src="./img/shanchu.png" />
        </div>
        <div class="desc">删除任务</div>
    </div>
    <div class="list-item" onclick="copyTask()">
        <div class="list-item-top">
            <img src="./img/fuzhi.png" />
        </div>
        <div class="desc">复制任务</div>
    </div>
    <div class="list-item" onclick="action_task()">
        <div class="list-item-top">
            <img src="./img/bofang.png" />
        </div>
        <div class="desc">手动执行</div>
    </div>
    <div class="list-item" onclick="pause_task();">
        <div class="list-item-top">
            <img src="./img/zt.png" />
        </div>
        <div class="desc">手动暂停</div>
    </div>
    <div class="list-item" onclick="stop_task();">
        <div class="list-item-top">
            <img src="./img/tingzhi.png" />
        </div>
        <div class="desc">手动停止</div>
    </div>
    <div class="list-item" onclick="pre_task();">
        <div class="list-item-top">
            <img src="./img/syq.png" />
        </div>
        <div class="desc">上一曲</div>
    </div>
    <div class="list-item" onclick="next_task();">
        <div class="list-item-top">
            <img src="./img/xyq.png" />
        </div>
        <div class="desc">下一曲</div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-col-md5">
        <div class="qm-list">
            <div class="qm-list-tit">曲目列表</div>
            <div class="qm-list-item">
                <table class="table">
                    <tbody id="mp3_list">
                    <!-- TODO 曲目列表 -->
                    </tbody>
                </table>
            </div>
        </div>
        <div class="qm-list" style="margin-top:4px">
            <div class="qm-list-tit">终端列表</div>
            <div class="qm-list-item">
                <table class="table">
                    <tbody id="clients_list">
                    <!-- TODO 终端列表 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-col-md7" style="height: 605px;overflow: auto;">
        <div class="layui-row">
            <div class="layui-col-md5">
                <div class="layui-btn-group">
                    <button id="looptype0" onclick="changeType(0)" name="looptype" type="button" class="layui-btn layui-btn-s bt">随机播放</button>
                    <button id="looptype1" onclick="changeType(1)" name="looptype" type="button" class="layui-btn layui-btn-primary layui-btn-s bt">循环播放</button>
                    <button id="looptype2" onclick="changeType(2)" name="looptype" type="button" class="layui-btn layui-btn-primary layui-btn-s bt">顺序播放</button>
                </div>
            </div>
            <div class="layui-col-md7" >
                <span>音量：</span>
                <input id="volume" style="width: 100px;display: inline-block;" type="text" name="title" lay-verify="required" autocomplete="off" class="layui-input" value="0">
                <button type="button" class="layui-btn layui-btn-warm" style="float: right;" onclick="update_task_volume();">修改</button>
            </div>
        </div>
        <div>
            <table class="layui-table">
                <thead>
                <tr>
                    <th>任务标识</th>
                    <th>任务状态</th>
                    <th>持续时间</th>
                    <th>当前播放曲目</th>
                </tr>
                </thead>
                <tbody id="task_list">
                <!-- TODO 任务列表 -->
                </tbody>
            </table>

<!--            <table class="layui-table" lay-data="{url:'/demo/table/user/',id:'test',page:true}" lay-skin="line" lay-filter="test">-->
<!--                <thead>-->
<!--                <tr>-->
<!--                    <th lay-data="{checkbox:true}"></th>-->
<!--                    <th lay-data="{field:'zt'}">任务标识</th>-->
<!--                    <th lay-data="{field:'id'}">任务状态</th>-->
<!--                    <th lay-data="{field:'name'}">持续时间</th>-->
<!--                    <th lay-data="{field:'mac'}">当前播放曲目</th>-->
<!--                </tr>-->
<!--                </thead>-->
<!--                </tbody>-->
<!--            </table>-->
        </div>
    </div>
</div>

<!-- 添加任务弹出框 -->
<div id="tt2" style="padding:20px;display: none;">
    <div class="item" style="padding: 10px 10px;width: 580px;height: 470px;">

        <div id="picker" class="layui-btn">本地上传</div>
        <button id="upload_btn" class="layui-btn" onclick="start_upload();">
            开始上传
        </button>
        <div id="yun_btn" class="layui-btn" onclick="open_show_yun();">云端选择</div>
        <div style="margin-top: 10px; height: 380px;  overflow: auto;">
            <!--<table class="table">
                <thead>
                <tr>
                    <th colspan="2">音乐列表</th>
                </tr>
                </thead>
                <tbody id="upload_list">
                </tbody>
            </table>-->
            <h4>音乐列表</h4>
            <ul class="list-group" id="upload_list">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
        </div>
    </div>
    <div class="item item2" style="height: 350px;">
        <div style="padding-left: 10px;padding-top: 10px;">
            <input type="text" placeholder="任务标识" id="taskname" style="width: 150px;display: inline-block;" autocomplete="off" class="layui-input">
            <input class="selectAll" id="checkbox1" onclick="checkall(this.checked);" style="width: 18px;height: 18px;position: relative;top: 4px;"  type="checkbox"> 全选
        </div>
        <div id="ztree_div" class="ztree"></div>
    </div>
    <div class="item item2" style="height: 100px; margin-top: 20px; padding: 10px">
        <h4>播放类型</h4>
        <select id="loopType" class="form-control m-b" name="loopType">
            <option value="0">随机播放</option>
            <option value="1">循环播放</option>
            <option value="2">顺序播放</option>
        </select>
    </div>
</div>

<!-- 云端列表 -->
<div id="yunlistdiv" style="display: none;">
    <ul class="list-group" id="yun_upload_list">
    </ul>
</div>

<script>
    var checked=false
    function changeType(num){
        typeNum=num
        $(".bt").addClass("layui-btn-primary")
        if(num==0){
            $("#looptype0").removeClass("layui-btn-primary")
        }else if(num == 1){
            $("#looptype1").removeClass("layui-btn-primary")
        } else {
            $("#looptype2").removeClass("layui-btn-primary")
        }
    }
    layui.use(['table', 'form','layer','slider','tree','upload'], function() {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var slider = layui.slider;
    });
    function openModal(num){
        layer.open({
            type: 1 //Page层类型
            ,area: ['900px', '600px']
            ,title: num==0?'新建任务':'编辑任务',
            offset:'20px',
            btn: ['确定','取消']
            ,shade: 0.6 //遮罩透明度
            ,maxmin: false //允许全屏最小化
            ,anim: 4 //0-6的动画形式，-1不开启
            ,content:$("#tt2")
            ,yes: function(index, layero){
                if(num == 0){
                    //提交任务
                    submit_task();
                } else if(num == 1){
                    //修改任务
                    var task = $("[alt='del']")[0];
                    var tid = task.getAttribute("taskidstr");
                    update_task(tid);
                }
                return true;
            },success: function(layero, index){
                $('body').attr('style','overflow:hidden')

                if(num == 0){
                    //初始化弹出框
                    open_Model(5);
                } else if(num == 1){
                    //编辑任务
                    isAction(1, 5);
                }
            },
            cancel: function(index, layero){
                $('body').removeAttr('style')
            }
        });
    }
    function selectAll(){
        checked=!checked
        $(".selectAll").attr("checked",checked)
        if(checked){
            console.log(checked)
            layui.tree.setChecked('t1', ['1-1', '1-2','2-1'])
        }else{
            console.log(checked)
            layui.tree.reload('t1', {
                //新的参数
            });
        }
    }
    function deleteTask(){
        isAction(2, 5);

        // layer.confirm('确定要删除吗?', {icon: 3, title:'系统提示'}, function(index){
        //     //do something
        //
        //     layer.close(index);
        // });
    }
    function copyTask(){
        copy_task(realMusicHtml);
        // layer.confirm('确定要复制吗?', {icon: 3, title:'系统提示'}, function(index){
        //     //do something
        //
        //     layer.close(index);
        // });
    }




</script>
</body>
</html>
